<template>
    <view>
        <view class="head_box bg-white">
            <view>
                <van-search shape="round" :value="search" placeholder="请输入宝贝名称" @change="onSearch" cancel-class="cancel-class" use-action-slot @clear="onClear">
                    <view slot="action" @tap="getSearch">搜索</view>
                </van-search>
            </view>
            <view class="searchboxs padding-lr" v-if="truth">
                <view class="flexbox-sb mrl-20">
                    <text>历史记录</text>
                    <image @tap="onDelete" class="icon-40" :src="imgUrl + 'delete.png'"></image>
                </view>
                <view class="hisbox">
                    <view class="hisitem" :data-value="item" v-if="item" @tap="getDatas" v-for="(item, index) in historyList" :key="index">{{ item }}</view>
                </view>
            </view>
        </view>
        <view style="height: 196rpx"></view>
        <view class="pages screentop" style="background: #fff" v-if="!truth">
            <view class="screenbox">
                <view data-index="0" :class="'screenbtn text-lg text-darkGray ' + (active1 == 0 ? 'oranges' : '')" @tap="openscreen">全部</view>
                <view data-index="1" :class="'screenbtn text-lg text-darkGray ' + (active1 == 1 ? 'oranges' : '')" @tap="openscreen">意豆</view>
                <view data-index="2" :class="'screenbtn text-lg text-darkGray ' + (active1 == 2 ? 'oranges' : '')" @tap="openscreen">现金+意豆</view>
                <!-- <view data-index="3" class="screenbtn text-lg text-darkGray {{active1==3?'oranges':''}}" bindtap="openscreen" >
        数量(最高)<image src="../../images/shangxia.png" class="shangxia"></image>
      </view> -->
                <view :class="'screenbtn text-lg text-darkGray ' + (active3 || active2 || active4 ? 'oranges' : '')" @tap="openscreens">
                    筛选
                    <image src="/static/images/screen.png" class="shangxia"></image>
                </view>
            </view>
        </view>

        <view class="mask" v-if="active4">
            <view class="maskbox">
                <view style="width: 670rpx; margin-top: 40rpx">
                    <view class="text-black text-df">豆值排序</view>
                    <view class="screenboxsbtn">
                        <view data-index="1" @tap="opgaodi" :class="'screenboxsbtnbox ' + (active3 == 1 ? 'gaodis' : '')">从高到低</view>
                        <view data-index="2" @tap="opgaodi" :class="'screenboxsbtnbox ' + (active3 == 2 ? 'gaodis' : '')">从低到高</view>
                    </view>
                    <view class="text-black text-df">豆值区间（豆）</view>
                    <view class="screenboxsbtn">
                        <view data-index="1" @tap="bindtapscreen" :class="'screenbtns ' + (active2 == 1 ? 'active2' : '')" data-integration="1">0-1000</view>
                        <view data-index="2" @tap="bindtapscreen" :class="'screenbtns ' + (active2 == 2 ? 'active2' : '')" data-integration="2">1000-3000</view>
                        <view data-index="3" @tap="bindtapscreen" :class="'screenbtns ' + (active2 == 3 ? 'active2' : '')" data-integration="3">3000-5000</view>
                        <view data-index="4" @tap="bindtapscreen" :class="'screenbtns ' + (active2 == 4 ? 'active2' : '')" data-integration="4">5000-1w</view>
                    </view>
                    <view class="text-black text-df">商品类型</view>
                    <view class="screenboxsbtn">
                        <view data-index="1" @tap="opXs" :class="'screenboxsbtnbox ' + (active5 == 1 ? 'gaodis' : '')">实物商品</view>
                        <view data-index="2" @tap="opXs" :class="'screenboxsbtnbox ' + (active5 == 2 ? 'gaodis' : '')">虚拟商品</view>
                    </view>
                    <view class="screenboxsbtn" style="margin-top: 60rpx">
                        <view class="screenboxsbtnboxs" @tap="chongzhifun">重置</view>
                        <view class="screenboxsbtnboxss screenboxsbtnboxs" @tap="closemak">完成</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="flexs justify-between padding-lr-sm padding-bottom" v-if="!truth">
            <!-- <view class="goods_info radius margin-top-sm bg-white" bindtap="toDetails2" data-productSn="{{item.productSn}}" wx:for="{{commodityinfoList}}" wx:key="index">
      <image class="goods_img" mode="widthFix" src="{{item.pic}}" />
      <view class=" padding-lr-sm text-sm text-white">已售: {{item.sale}}</view>
      <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{item.name}}</view>
      <view class="flexs align-center padding-lr-sm padding-bottom-sm">
        <view class="text-price text-red text-df text-bold" wx:if="{{(item.price && item.price != '0.00') && active1 != 1}}">{{item.price == '0.00' ? '' : item.price + ' +'}}</view>
        <image src="../../images/douzi.png" style="width:20rpx;height:18rpx;margin:0 10rpx;"></image>
        <view class=" text-red text-df text-bold">{{item.integration || '0'}}</view>
      </view>
      <view class="{{item.marker?'flexs padding-bottom-sm flex-wrap padding-left-sm':'flexs padding-bottom-sm padding-left-sm'}}">
        <view class="padding-bottom-sm text-sm text-orange padding-right-sm" wx:if="{{item.distributionType !=1 && item.distributionType}}">支持到店自提</view>
        <view class="markerpic" wx:if="{{item.priceMaker}}">
          <text class="text-orange">创客</text>
          <text style="color: #FF1717;">{{item.priceMaker == '0.00' ? '' : '￥' + item.priceMaker + ' +'}}</text>
        </view>
      </view>
    </view> -->
            <view>
                <view
                    class="goods_info radius margin-top-sm bg-white"
                    v-if="index % 2 == 0"
                    @tap="toDetails2"
                    :data-productSn="item.productSn"
                    v-for="(item, index) in commodityinfoList"
                    :key="index"
                >
                    <image class="goods_img" mode="widthFix" :src="item.pic" />

                    <view class="padding-lr-sm text-sm text-white">已售: {{ item.sale }}</view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view class="flexs align-center padding-lr-sm padding-bottom-sm">
                        <view class="text-price text-red text-df text-bold" v-if="item.price && item.price != '0.00'">{{ item.price == '0.00' ? '' : item.price + ' +' }}</view>
                        <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                        <view class="text-red text-df text-bold">{{ item.integration || '0' }}</view>
                    </view>

                    <view class="flexs padding-bottom-sm flex-wrap padding-left-sm">
                        <view class="padding-bottom-sm text-sm text-orange padding-right-sm" v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>
                        <view class="markerpic" v-if="item.priceMaker" @tap.stop.prevent="getMarkerDetails">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">{{ item.priceMaker == '0.00' || item.priceMaker == null ? '' : '￥' + item.priceMaker }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view>
                <view
                    class="goods_info radius margin-top-sm bg-white"
                    @tap="toDetails2"
                    v-if="index % 2 == 1"
                    :data-productSn="item.productSn"
                    v-for="(item, index) in commodityinfoList"
                    :key="index"
                >
                    <image class="goods_img" mode="widthFix" :src="item.pic" />

                    <view class="padding-lr-sm text-sm text-white">已售: {{ item.sale }}</view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view class="flexs align-center padding-lr-sm padding-bottom-sm">
                        <view class="text-price text-red text-df text-bold" v-if="item.price && item.price != '0.00'">{{ item.price == '0.00' ? '' : item.price + ' +' }}</view>
                        <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                        <view class="text-red text-df text-bold">{{ item.integration || '0' }}</view>
                    </view>

                    <view :class="item.marker ? 'flexs padding-bottom-sm flex-wrap padding-left-sm' : 'flexs padding-bottom-sm padding-left-sm'">
                        <view class="padding-bottom-sm text-sm text-orange padding-right-sm" v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>
                        <view class="markerpic" v-if="item.priceMaker">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">{{ item.priceMaker == '0.00' || item.priceMaker == null ? '' : '￥' + item.priceMaker }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pagesb/yidoulist/yidoulist.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            active1: 1,
            //意豆还是意豆+现金
            active2: 0,
            //价格区间按钮
            active3: 0,
            //价格从高到低，从低到高
            active5: 0,
            //1实物商品，2虚拟商品
            active4: false,
            //筛选的弹框
            commodityinfoList: [],
            // 列表数据
            search: '',
            productSn: '',
            brandId: '',
            publishStatus: '',
            verifyStatus: '',
            minPrice: '',
            maxPrice: '',
            integration: '',
            page: 0,
            pageSize: 20,
            order: '',
            marker: '',
            //创客价超出显示
            truth: true,
            historyList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log(options);

        if (options.type != 0) {
            uni.setNavigationBarTitle({
                title: options.type == 1 ? '意豆兑换' : options.type == 2 ? '现金+意豆' : '全部'
            });
            this.getData(options.type);

            if (options.type == 9) {
                this.setData({
                    active1: 0,
                    active5: 2,
                    truth: false
                });
            } else {
                this.setData({
                    active1: options.type,
                    truth: false
                });
            }
        } else {
            this.setData({
                active1: options.type,
                truth: true
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let yidouHistory = uni.getStorageSync('yidouHistory');
        this.setData({
            historyList: yidouHistory
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.getAllcommodityinfo(this.search, this.page, false, false);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 搜索值
        onSearch(e) {
            let keywork = e.detail.replace(/\s+/g, '');
            this.setData({
                search: keywork,
                page: 0
            });
        },

        // 点击清空
        onClear() {
            this.setData({
                commodityinfoList: null,
                truth: true
            });
        },

        getSearch() {
            let search = this.search;

            if (search) {
                this.setData({
                    truth: search.length == 0 ? true : false
                });
                this.getAllcommodityinfo(search, this.page, false, true);
            } else {
                uni.showToast({
                    title: '请输入宝贝名称',
                    icon: 'none'
                });
            }
        },

        // 重置
        chongzhifun() {
            this.setData({
                active3: 0,
                active2: 0,
                active5: 0,
                integration: '',
                order: ''
            });
        },

        // 高低排序
        opgaodi(e) {
            if (this.active3 == e.currentTarget.dataset.index) {
                this.setData({
                    active3: 0,
                    order: ''
                });
                return;
            }

            this.setData({
                active3: e.currentTarget.dataset.index,
                order: e.currentTarget.dataset.index == 1 ? 'desc' : 'asc'
            });
        },

        // 详情
        toDetails2(item) {
            uni.navigateTo({
                url: '/pagesb/detailed/detailed?productsn=' + item.currentTarget.dataset.productsn
            });
        },

        // 完成筛选
        closemak() {
            this.setData(
                {
                    active4: false,
                    page: 0
                },
                () => {
                    this.getAllcommodityinfo(this.search, this.page, false, false);
                }
            );
        },

        bindtapscreen(e) {
            if (this.active2 == e.currentTarget.dataset.index) {
                this.setData({
                    active2: 0,
                    integration: ''
                });
                return;
            }

            this.setData({
                active2: e.currentTarget.dataset.index,
                integration: e.currentTarget.dataset.integration
            });
        },

        opXs(e) {
            if (this.active5 == e.currentTarget.dataset.index) {
                this.setData({
                    active5: 0,
                    integration: ''
                });
                return;
            }

            this.setData({
                active5: e.currentTarget.dataset.index
            });
        },

        openscreens() {
            this.setData({
                active4: this.active4 ? false : true
            });
        },

        openscreen(e) {
            this.getData(e.currentTarget.dataset.index); // 统一重置公共参数

            this.setData({
                active1: e.currentTarget.dataset.index,
                active2: 0,
                active3: 0,
                active5: 0,
                integration: '',
                order: ''
            });
        },

        //点击了删除
        onDelete() {
            uni.setStorageSync('yidouHistory', []);
            this.setData({
                historyList: []
            });
        },

        // 点击历史记录
        getDatas(e) {
            const search = e.currentTarget.dataset.value;
            this.setData({
                search: search,
                truth: false
            });
            this.getAllcommodityinfo(search, this.page, false, false);
        },

        // 去重,保留最新输入值
        noRepeat(value, arr) {
            if (!arr) {
                return [value];
            }

            let newArr = arr?.filter((item) => {
                return item != value;
            });
            return [value, ...newArr];
        },

        // 获取列表数据
        getAllcommodityinfo(search, page, show, bool) {
            const { minPrice, integration, active3, commodityinfoList, active1, active5 } = this; // type：1-普通商城 2-意豆商城 3-供应链
            // product_attr：1实物商品、2虚拟商品

            let data = {
                search: search,
                productType: minPrice,
                integration,
                offset: page,
                pageSize: 20,
                userId: uni.getStorageSync('userId'),
                sort: active3,
                // type: active5 != 2 ? ((active5 != 1 && active1 == 0) ? '' : 2) : 3,
                type: active5 != 2 ? '' : 3,
                productAttr: active5
            };
            let yidouHistory = uni.getStorageSync('yidouHistory');

            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            } // 点击历史记录

            if (bool && search && !yidouHistory.includes(search)) {
                let newHistory = [search, ...yidouHistory];
                uni.setStorageSync('yidouHistory', newHistory);
                this.setData({
                    historyList: newHistory
                });
                console.log('ww'); // 重复值不存值,替换最新
            } else {
                let array = [];
                array = this.noRepeat(search, yidouHistory);
                uni.setStorageSync('yidouHistory', array);
                this.setData({
                    historyList: array
                });
            }

            _request
                .get('/mall-product/getYiDouList', { ...data }, app.globalData.mallType)
                .then((res) => {
                    if (res.data.code == 200) {
                        let list = res.data.data || [];
                        list.forEach((e) => {
                            if (e.priceMaker) {
                                let str = e.priceMaker.toString();

                                if (str.length > 6) {
                                    e.marker = true;
                                } else {
                                    e.marker = false;
                                }
                            }
                        });

                        if (list.length > 0) {
                            this.setData({
                                truth: false
                            });
                        }

                        this.setData({
                            commodityinfoList: page > 0 ? [...commodityinfoList, ...list] : list
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none'
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载
                    }

                    uni.stopPullDownRefresh(); //停止下拉刷新
                })
                .catch((error) => {
                    console.log(error, 'error');

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载
                    }

                    uni.stopPullDownRefresh(); //停止下拉刷新
                });
        },

        // 公共方法
        getData(type) {
            switch (type) {
                case '0':
                    // 获取列表数据
                    this.setData(
                        {
                            minPrice: '',
                            maxPrice: '',
                            page: 0
                        },
                        () => {
                            this.getAllcommodityinfo(this.search, this.page, false, true);
                        }
                    );
                    break;

                case '1':
                    this.setData(
                        {
                            minPrice: 4,
                            maxPrice: 0,
                            page: 0
                        },
                        () => {
                            this.getAllcommodityinfo(this.search, this.page, false, true);
                        }
                    );
                    break;

                case '2':
                    this.setData(
                        {
                            minPrice: 3,
                            maxPrice: '',
                            page: 0
                        },
                        () => {
                            this.getAllcommodityinfo(this.search, this.page, false, true);
                        }
                    );
                    break;

                case '9':
                    // 获取列表数据
                    this.setData(
                        {
                            minPrice: '',
                            maxPrice: '',
                            page: 0
                        },
                        () => {
                            this.getAllcommodityinfo(this.search, this.page, false, true);
                        }
                    );
                    break;
            }
        },

        getMarkerDetails() {
            console.log('占位：函数 getMarkerDetails 未声明');
        }
    }
};
</script>
<style>
.head_box {
    width: 750rpx;
    position: fixed;
    left: 0;
    height: 196rpx;
    z-index: 99;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.search {
    width: 620rpx;
    height: 70rpx;
    background: #eeeeee;
}

.search_img1 {
    width: 28rpx;
    height: 28rpx;
}

.padding-lr-sm {
    flex-wrap: wrap;
}

.searchtop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    z-index: 99;
    background: #fff;
}

.screentop {
    position: fixed;
    left: 0;
    right: 0;
    top: 110rpx;
    margin: 0 auto;
    z-index: 99;
}

.screenboxsbtn {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0;
}

.screenbtns {
    padding: 0 8rpx;
    line-height: 42rpx;
    height: 42rpx;
    border: 1rpx solid #999999;
    border-radius: 21rpx;
    color: #999999;
}

.active2 {
    border: 1rpx solid #ff8722;
    background: #fedec2;
    color: #ff8722;
}

.searchbox {
    width: 640rpx;
    height: 64rpx;
    background-color: #eeeeee;
    border-radius: 32rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 24rpx;
}

.screenbox {
    width: 650rpx;
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
}

.screenbtn {
    color: #666666;
    display: flex;
    align-items: center;
}

.oranges {
    color: #ff8722;
}

.shangxia {
    width: 28rpx;
    height: 28rpx;
    margin-left: 10rpx;
}

.goods_info {
    width: 340rpx;
    position: relative;
    box-shadow: 0px 4px 8px 0px rgba(230, 230, 230, 0.5);
}

.goods_img {
    width: 340rpx;
    height: 340rpx;
    border-radius: 10rpx 10rpx 0 0;
}

.mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 50;
}

.maskbox {
    position: fixed;
    width: 100%;
    /* height: 650rpx; */
    display: flex;
    justify-content: center;
    background: #fff;
    top: 178rpx;
}

.screenboxsbtnbox {
    width: 300rpx;
    height: 54rpx;
    border: 3rpx solid #e2e2e2;
    line-height: 54rpx;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
}

.screenboxsbtnboxs {
    width: 260rpx;
    height: 82rpx;
    border: 3rpx solid #ff8722;
    text-align: center;
    line-height: 82rpx;
    border-radius: 41rpx;
    color: #ff8722;
    font-size: 32rpx;
}

.screenboxsbtnboxss {
    background: #ff8722;
    color: #fff;
}

.searchboxinput {
    margin-right: 20rpx;
    width: 600rpx;
}

.gaodis {
    border-color: #ff8722;
    background: #fedec2;
    color: #ff8722;
}

.search-btn {
    height: 64rpx;
    line-height: 64rpx;
    color: #666666;
    font-size: 32rpx;
    margin-top: 20rpx;
}

.markerpic {
    width: max-content;
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    /* margin-left: 20rpx; */
    padding: 0 10rpx;
}

.searchboxs {
    margin: 40rpx 0;
}

.hisbox {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 400rpx;
}

.hisitem {
    height: 52rpx;
    background: #f2f2f2;
    padding: 0 24rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 52rpx;
    width: fit-content;
    margin: 0 20rpx 30rpx 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
